<template>
  <div class="manageExperiment">
    <div style="padding: 4px 10px 0">
      <span
        round
        @click="goBack"
        style="
          display: inline-block;
          width: 80px;
          padding: 4px 0;
          border-radius: 4px;
          background: white;
          text-align: center;
          color: #03a9f4;
          font-size: 14px;
        "
      >
        返回
      </span>
    </div>
    <!-- <div class="manageExperiment_header">
      <el-input
        v-model="searchValue"
        size="default"
        placeholder="请输入设备编号"
        style="margin-right: 10px"
      >
        <template #append>
          <el-button :icon="Search" @click="searchFn" />
        </template>
      </el-input>
    </div> -->

    <!-- <el-select
        style="color: #000"
        v-model="selectValue"
        class="m-2"
        placeholder="请选择"
        @change="searchFn"
      >
        <el-option label="进行中" value="进行中" />
        <el-option label="终止" value="终止" />
      </el-select> -->
    <!-- <el-button type="primary" class="createBtn" @click="dialogVisible = true"
        >创建实验</el-button
      > -->
    <!-- <el-button type="primary" class="createBtn" @click="goToCreatePage"
        >创建实验</el-button
      > -->

    <div v-if="!loading && !list.length" class="noData" style="height: 200px">
      暂无数据
    </div>
    <div
      v-else
      class="manageExperiment_content"
      @scroll.passive="getScrollData($event)"
      v-loading.body="loading"
      element-loading-background="transparent"
    >
      <div class="contentItem" v-for="(item, index) in list" :key="index">
        <div class="contentItem_rows">
          <span>测量序号：</span>
          <span>{{ item?.id }}</span>
        </div>
        <div class="contentItem_rows">
          <span>设备编号ID：</span>
          <span>{{ item?.deviceNo }}</span>
        </div>
        <div class="contentItem_rows">
          <span>开始时间：</span>
          <span>{{ item?.measurementStartTime }}</span>
        </div>
        <div class="contentItem_rows">
          <span>结束时间：</span>
          <span>{{ item?.measurementEndTime }}</span>
        </div>
        <div class="contentItem_rows">
          <span>A相电能：</span>
          <span>{{ item?.oneChannelMinutePower }}</span>
        </div>
        <!-- <div class="contentItem_rows">
            <span>一通道累计电量：</span>
            <span>{{ item?.oneChannelAccumulatedPower }}</span>
          </div> -->
        <div class="contentItem_rows">
          <span>B相电能：</span>
          <span>{{ item?.twoChannelMinutePower }}</span>
        </div>
        <!-- <div class="contentItem_rows">
            <span>二通道累计电量：</span>
            <span>{{ item?.twoChannelAccumulatedPower }}</span>
          </div> -->
        <div class="contentItem_rows">
          <span>C相电能：</span>
          <span>{{ item?.threeChannelMinutePower }}</span>
        </div>
        <div class="contentItem_rows">
          <span>合计电能：</span>
          <span>{{ item?.minutePowerTotal }}</span>
        </div>
        <div class="contentItem_rows">
          <span>累计电能：</span>
          <span>{{ item?.accumulatedPowerTotal }}</span>
        </div>
        <!-- <div class="contentItem_rows">
            <span>三通道累计电量：</span>
            <span>{{ item?.threeChannelAccumulatedPower }}</span>
          </div> -->
        <!-- <div class="contentItem_rows">
            <span>TCP同步时间：</span>
            <span>{{ item?.creatTime }}</span>
          </div> -->
      </div>
    </div>

    <el-dialog v-model="dialogVisible" width="80%" :show-close="false">
      <div class="titleTex">请输入设备编号添加设备</div>
      <el-row justify="space-around">
        <el-col :span="12">
          <el-input
            v-model="deviceNo"
            size="default"
            placeholder="请输入设备编号"
          />
        </el-col>
        <el-col :span="12" style="display: flex; justify-content: space-around">
          <el-button
            class="btn"
            type="primary"
            @click="add"
            :disabled="equipmentList.length >= 2"
          >
            确认添加
          </el-button>
        </el-col>
      </el-row>
      <div v-if="equipmentList.length">
        <div
          v-for="(item, index) in equipmentList"
          :key="index"
          class="deviceBox"
        >
          <div class="deviceBox_header">
            <span>设备{{ index + 1 }} ：{{ item.deviceNo }}</span>
            <el-icon @click="delDevice(item.deviceNo)"
              ><CircleCloseFilled
            /></el-icon>
          </div>
          <div>添加通道：</div>
          <div>
            <el-checkbox-group
              v-model="item.checkList"
              @change="(value) => changeCheckbox(value, item.deviceNo)"
            >
              <el-checkbox label="通道1" />
              <el-checkbox label="通道2" />
              <el-checkbox label="通道3" />
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <template #header>
        <div class="dialog_title">添加设备</div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="btn" type="primary" @click="goToCreate">
            下一步
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Search, CircleCloseFilled } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { getTCPDataList } from "@/api"
import { debounce } from "@/util/tools"
import { useManageExperiment } from "@/hooks/useManageExperiment"
const { setEquipmentListFn } = useManageExperiment()

const $router = useRouter()

const dialogVisible = ref(false)

const searchValue = ref("")
const selectValue = ref("")

onMounted(() => {
  getList()
})

const list = ref([])

// const goToCreate = () => {
//   getDeviceList(deviceNo.value).then((res) => {
//     if (res.code === 200) {
//       $router.push({
//         path: "/manageExperiment/createExperiment",
//         query: { deviceNo: deviceNo.value }
//       })
//     } else {
//       ElMessage.error(res.msg)
//     }
//   })
// }

const sign = ref(80)
const getScrollData = (event) => {
  if (loading.value) return
  let scrollBottom =
    event.target.scrollHeight -
    event.target.scrollTop -
    event.target.clientHeight
  if (scrollBottom < 200) {
    getList()
  }
  // var oScrollTop = event.target.scrollTop
  // if (oScrollTop > 80) {
  //   //write your code
  // }
  // if (oScrollTop < 80) {
  //   //write your code
  // }
  // if (oScrollTop > sign.value) {
  //   sign.value = oScrollTop //更新scrollTop
  //   if (scrollBottom < 100) {
  //     getList()
  //   }
  // }
  // if (oScrollTop < sign.value) {
  //   sign.value = oScrollTop //更新scrollTop
  // }
}
const getScroll = debounce(getScrollData, 500)

const pageNumber = ref(1)
const getService = ref(true)
const loading = ref(false)
const getList = async () => {
  if (!getService.value) return
  loading.value = true
  const res = await getTCPDataList({
    pageNumber: pageNumber.value,
    pageSize: 10,
    deviceNo: props.deviceNo
    // status: selectValue.value
  })
  loading.value = false
  if (res) {
    const { rows } = res
    getService.value = rows
    if (rows && rows.length < 10) {
      getService.value = false
    } else {
      getService.value = true
      pageNumber.value = pageNumber.value + 1
    }
    list.value = [].concat(list.value).concat(rows)
  }
}

const searchFn = () => {
  pageNumber.value = 1
  getService.value = true
  list.value = []
  getList()
}

// 添加设备
const deviceNo = ref("")
const equipmentList = ref([])
const add = () => {
  if (!deviceNo.value) {
    ElMessage({
      message: "请输入设备编号！",
      type: "warning"
    })
    return
  }
  equipmentList.value.push({
    deviceNo: deviceNo.value,
    checkList: []
  })
  deviceNo.value = ""
}

// 删除设备
const delDevice = (id) => {
  const list = equipmentList.value.filter((i) => i.deviceNo !== id)
  equipmentList.value = list
}

// 选择通道
const goToCreate = () => {
  if (!equipmentList.value.length) {
    ElMessage({
      message: "请添加设备！",
      type: "warning"
    })
    return
  }
  let allTrue = true
  equipmentList.value.map((item) => {
    if (!item.checkList.length) {
      allTrue = false
    }
  })
  if (!allTrue) {
    ElMessage({
      message: "请选择设备通道！",
      type: "warning"
    })
    return
  }
  setEquipmentListFn(equipmentList.value)
  $router.push({
    path: "/createExperiment/step1"
  })
}

const changeCheckbox = (value, id) => {
  console.log("value", value, id)
}

const goToCreatePage = () => {
  $router.push({
    path: "/createExperiment/step1"
  })
}

const props = defineProps(["deviceNo"])
const emits = defineEmits(["update:isDetail"])

const goBack = () => {
  emits("update:isDetail", false)
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>
